<template>
    <div>
      <!-- 水平菜单 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
        <!-- <el-menu-item index="/"></el-menu-item> -->
        <el-sub-menu index="订单管理">
          <template #title>订单管理</template>
          <el-menu-item index="/userunpaid">未支付商品订单</el-menu-item>
          <el-menu-item index="/commodity">添加订单</el-menu-item>
          <el-menu-item index="/userpaidorders">已支付订单</el-menu-item>
          <el-menu-item index="/usernotshippedyet">未发货订单</el-menu-item>
          <el-menu-item index="/useralreadyshipped">已发货订单</el-menu-item>
          <el-sub-menu index="workspace-more">
            <template #title>更多</template>
            <el-menu-item index="/settings">设置</el-menu-item>
            <el-menu-item index="/reports">报告</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
     
      </el-menu>
  
      <!-- 路由视图 -->
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HeaderMenu',
    data() {
      return {
        activeIndex: '/', // 默认激活的菜单项
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log('Selected:', key, keyPath);
        // 可以在这里添加额外的逻辑，例如权限检查或日志记录
      },
    },
    created() {
      // 设置默认激活的菜单项为当前路由路径
      this.activeIndex = this.$route.path;
    },
    watch: {
      // 监听路由变化并更新激活的菜单项
      '$route.path': {
        immediate: true,
        handler(newPath) {
          this.activeIndex = newPath;
        },
      },
    },
  };
  </script>
  
  <style scoped>
  .el-menu-demo {
    padding-left: 0;
    margin-bottom: 20px;
  }
  
  .el-menu-item.is-active {
    background-color: #ecf5ff !important;
    color: #409eff;
  }
  
  .el-submenu .el-menu-item {
    background-color: #fdf6ec !important;
  }
  
  .el-submenu .el-menu-item.is-active {
    background-color: #e6a23c !important;
    color: white;
  }
  </style>